<template>
	<div class="menu_three">
		<ol>
			<li v-for="item in list" :key="item.id">
				<p>
					<img :src="item.img"/>
				</p>
				<aside>
					<span v-if="item.title!=undefined">{{item.title}}</span>
					<p>{{item.txt}}</p>
					<label v-if="item.price!=undefined">￥<strong>{{item.price}}</strong><a>起</a></label>
					<em>{{item.time}}</em>
				</aside>
			</li>
		</ol>
	</div>
</template>

<script>
	export default{
		name:'Menu_three',
		data(){
			return{
				list:[]
			}
		},
		created(){
			let that = this;
			this.axios.get('/api/dataHome.json').then((res)=>{
				
				that.list = res.data.Homemsg[0].MenuList.list3;
				
				
			} ).catch( (error)=>{
				
				console.log(error)
			} )
		},
	}
</script>

<style scoped>
	.menu_three{
		width: 100%;
		overflow: hidden;
		background-color: #efefef;
	}
	.menu_three ol li{
		width: 48%;
		margin: 1%;
		float: left;
		border-radius: 0.6rem;
		background-color: white;
		position: relative;
	}
	.menu_three li:first-child img{
		width: 100%;
		height: 100%;
		border-radius: 0.6rem;
	}
	.menu_three li:first-child{
		margin-top: 0.2rem;
		width: 48%;
		height: 6rem;
	}
	
	.menu_three li img{
		width: 100%;
		height: 100%;
		border-radius: 0.6rem 0.6rem 0 0;
	}
	.menu_three li span{
		position: absolute;
		top: 0;
		right: 0;
		padding: 0.2rem 0.5rem;
		background-color: rgba(0,0,0,0.6);
		border-radius: 0 0.5rem 0 0.5rem;
		color: white;
	}
	.menu_three li aside p{
		margin: 0.2rem 0.5rem;
		font-weight: bold;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
	}
	.menu_three li aside label{
		display: block;
		padding: 0.2rem 0.5rem;
		float: left;
		color: gray;
	}
	.menu_three li aside label strong{
		color: orange;
		font-weight: bold;
		font-size: 0.12rem
	}
	.menu_three li aside em{
		padding: 0.2rem 0.5rem;
		float: right;
		color: #808080;
	}
	.menu_three li:nth-of-type(even){
		margin-top: 0.3rem;
	}
</style>
